<template>
  <div class="member-form">
    <el-dialog
      v-model="dialogFormVisible"
      title="新增人员"
      width="650px"
      @closed="handleCancel"
      :destroy-on-close="true"
    >
      <div class="sub-form">
        <logo-view></logo-view>
        <register-form ref="submitForm"></register-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleCancel()">取消</el-button>
          <el-button type="primary" @click="handleSubmit()"> 提交 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { useMemberStore } from '@/stores/member/member.js'
import { useRegisterStore } from '@/stores/member/register.js'
import { storeToRefs } from 'pinia'
import RegisterForm from '@/components/login/RegisterForm.vue'
import { onMounted, ref } from 'vue'
import { showErrorMsg } from '@/utils/alterMessage.js'
import LogoView from '@/components/login/LogoView.vue'

const memberStore = useMemberStore()
const registerStore = useRegisterStore()
const { dialogFormVisible } = storeToRefs(memberStore)
const submitForm = ref(null)

const handleCancel = () => {
  memberStore.dialogFormVisible = false
  registerStore.clearMember()
}

const handleSubmit = () => {
  console.log(memberStore.memberList)
  if (submitForm.value) {
    submitForm.value.validateForm((isValid) => {
      if (isValid) {
        let result = registerStore.addMember()
        if (result) {
          registerStore.clearMember()
          memberStore.getMemberList()
          memberStore.dialogFormVisible = false
        }
      } else {
        showErrorMsg('表单验证失败')
      }
    })
  }
}

onMounted(() => {
  registerStore.onShow = false
})
</script>

<style scoped lang="scss">
.member-form {
  //圆角
  border-radius: 50px;
  .sub-form {
    margin-right: 50px;
    margin-left: 50px;
  }
  .dialog-footer {
    display: flex;
    justify-content: space-between;
    padding: 50px;
  }
}
</style>
